{% extends "layout.html" %}
{% block head %}
<link rel="stylesheet" href="styles/uPlot.min.css">
<style>
    .uplot {
        display: inline-block;
        vertical-align: top;
        width: min-content;
    }

    .u-over {
        box-shadow: 0px 0px 0px 0.5px #ccc;
    }

    .u-legend {
        text-align: left;
        padding-left: 50px;
    }

    .u-inline tr {
        margin-right: 8px;
    }

    .u-label {
        font-size: 12px;
    }

    .u-tooltip {
        font-size: 10pt;
        position: absolute;
        background: #fff;
        display: none;
        border: 2px solid black;
        padding: 4px;
        pointer-events: none;
        z-index: 100;
        white-space: pre;
        font-family: monospace;
    }

    body {
        padding: 1em;
        margin: 0;
    }
</style>
<link rel="stylesheet" type="text/css" href="scripts/graphs.css">
{% endblock %}
{% block content %}
<div id="app"></div>
{% endblock %}
{% block script %}
<script src="scripts/graphs.js"></script>
{% endblock %}
